<script>

export default {
  name: "Search",
  data() {
    return {
      keyword: ''
    }
  },

  methods: {
    searchUsers() {
      //请求前更新数据
      this.$bus.$emit('searchData',{
        userList: [],
        isFirst: false,
        loading: true,
        errMsg: ''
      })
      console.log(this)
      this.$http.get(`https://api.github.com/search/users?q=${this.keyword}`)
        .then(
            res => {
              console.log(res.data.items);
              this.$bus.$emit('searchData', {
                userList: res.data.items,
                loading: false,
                errMsg: ''
              });
            },
            err=>{
              console.log(err.message)
              this.$bus.$emit('searchData', {
                userList: [],
                loading: false,
                errMsg: err.message
              });
            }
        )
    }
  }

}
</script>

<template>
  <section class="jumbotron">
    <h3 class="jumbotron-heading">Search Github Users</h3>
    <div>
      <input type="text" placeholder="enter the name you search" v-model="keyword"/>&nbsp;
      <button @click="searchUsers">Search</button>

    </div>
  </section>
</template>

<style scoped>

</style>